<template>
	<view class="check-box" @click="onChange">
		<view 
			class="check-box-icon-wrap" 
			:class="{'check-box-active': checked, 'check-box-disabled': disabled, 'check-box-plain': plain }" 
			:style="{'--active-color': color}"
		>
			<u-icon name="checkbox-mark" color="#fff" size="24rpx"></u-icon>
		</view>
		<view class="check-box-label">
			<slot v-if="useLabel"></slot>
			<text v-else>{{ label }}</text>
		</view>
	</view>
</template>

<script>
	/**
	 * 多选框
	 */
	export default {
		name: 'custom-checkbox',
		props: {
			checked: Boolean,
			label: String,
			useLabel: Boolean,
			disabled: Boolean,
			plain: Boolean,
			color: {
				type: String,
				default: '#0E94FC'
			}
		},
		methods: {
			onChange() {
				if (this.disabled) return
				this.$emit('change', !this.checked)
			}
		}
	}
</script>

<style lang="scss" scoped>
.check-box {
	display: flex;
	align-items: center;
	&-icon-wrap {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		background-color: #fff;
		// border: 1px solid rgb(200, 201, 204);
		border: 1px solid #e7e7e7;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	&-plain {
		background-color: rgba(0, 0, 0, 0.4)
		
	}
	&-active {
		background-color: var(--active-color);
		border-color: var(--active-color);
	}
	&-disabled {
		background-color: $u-bg-color;
		border-color: rgb(200, 201, 204);
	}
	&-label {
		margin-left: 10rpx;
		font-size: 30rpx;
		line-height: 30rpx;
		color: $u-tips-color;
	}
}
</style>
